<template xmlns="http://www.w3.org/1999/html">
  <div class="main-content">

    <IsLoading v-if="isLoading"></IsLoading>

    <div class="scalable-container" :style="{ transform: `scale(${scale})`, transformOrigin: 'top' }">
      <!-- 页面内容 -->
      <div class="content">
        <div>
          <!--     左边区域-->
          <el-row>
            <el-col :span=" 3 " class="item-left-col">
              <!--          导航栏区域-->
              <div>
                <div style="font-size: 20px;font-weight: bold;text-align: center;margin: 20px 0">助教下载站
                </div>
                <div class="container">
                  <!-- “全部分类”按钮 -->
                  <el-button icon="el-icon-menu" class="left-scroll-view-item"
                             :class="{'is-active': activeIndex === null}"
                             @click="setActive(null)"
                             style="flex: 1; width: 100%; box-sizing: border-box;height: 50px; position: relative; overflow: hidden;">
                    全部分类
                    <div v-if="activeIndex === null" class="active-indicator"></div>
                  </el-button>

                  <el-scrollbar wrap-style="overflow-x:hidden;" style="height: 500px;">
                    <el-button v-for="(item, index) in buttonItems" :key="index" type="text"
                               class="left-scroll-view-item" :class="{'is-active': activeIndex === index}"
                               @click="setActive(index,item.id)"
                               style="flex: 1; width: 100%; box-sizing: border-box;height: 50px; position: relative; overflow: hidden;padding-right: 3px">
                      <img :src="IMAGE_URL + item.img" style="width: 21px;height: 15px;padding-right: 8px">
                      {{ item.name }}
                      <div v-if="activeIndex === index" class="active-indicator"></div>
                    </el-button>
                  </el-scrollbar>
                </div>

                <!--          下方图片区域 -->
                <div class="image-button-container">
                  <img src="@/assets/imgs/homeTwo.png"
                       style="width: 100%; height: auto; display: block;margin-top: 60px">
                </div>
              </div>

            </el-col>

            <!--        右边区域-->
            <el-col :span=" 21 " class="item-right">
              <!--          面包屑和排行榜区域-->
              <div class="breadcrumb-and-rank">
                <el-breadcrumb separator-class="el-icon-arrow-right" style="flex:1">
                  <el-breadcrumb-item :to="{ path: '/front/homeFront' }">首页</el-breadcrumb-item>
                  <el-breadcrumb-item style="cursor: pointer"
                                      :to="{ path: '/front/faceClick', query: { id: this.appDetails.categoryId, categoryName: this.categoryName, activeIndex:this.activeIndex }}">
                    {{ categoryName }}
                  </el-breadcrumb-item>
                  <el-breadcrumb-item>{{ appDetails.name }}</el-breadcrumb-item>
                  <!-- 使用 categoryName -->
                </el-breadcrumb>
                <!--                <span class="rank-text" style="margin-left: auto;">排行榜</span>-->
              </div>

              <!--     软件详细区域     -->
              <div class="container-right">
                <div class="item-left">
                  <div class="card">
                    <img :src="IMAGE_URL + appDetails.img" class="item-img">
                    <div class="item">
                      <div style="display: flex;flex-direction: row">
                        <div class="item-name">{{ appDetails.name }}</div>
                      </div>
                      <div class="item-desc">
                      </div>
                      <div class="item-intro">
                        介绍：<span v-if="appDetails.introduction">{{ appDetails.introduction }}</span>
                        <span v-else>暂无</span>
                      </div>
                    </div>
                  </div>
                  <!--              右边下载地址区域-->
                  <div class="download-right">
                    <div style="display:flex;margin-bottom: 10px;margin-top: 18px">
                      <el-link icon="el-icon-upload" style="font-size: 23px;color: blue"></el-link>
                      <el-link style="font-size: 15px">下载地址</el-link>
                    </div>
                    <div v-if="number" style="display:flex;margin: 10px;cursor: pointer;">
                      <div v-for="(item, key) in getChannels " :key="key"
                           style="margin-right: 10px;display: flex;flex-direction: column"
                           @click="openDialog(key)">
                        <img v-if="key === '百度网盘'"
                             :src="item[0].img ? IMAGE_URL + item[0].img : require('@/assets/imgs/baidu.png')"
                             style="width: 65px;height: 60px">
                        <img v-else-if="key === '夸克网盘'"
                             :src="item[0].img ? IMAGE_URL + item[0].img : require('@/assets/imgs/kuake.png')"
                             style="width: 65px;height: 60px">
                        <img v-else :src="item[0].img ? IMAGE_URL + item[0].img : require('@/assets/imgs/neiwang.png')"
                             style="width: 65px;height: 60px">

                        <el-link v-if="key === '内网可访问'" style="font-weight: bold;text-align: center">直接下载
                        </el-link>
                        <el-link v-else style="font-weight: bold;text-align: center">{{ key }}</el-link>
                      </div>
                    </div>

                    <div v-if="!number" style="display: flex;align-items: center;flex-direction: column;margin-left: 30px">
                      <img style="width: 23px;height: 23px;margin: 5px" src="@/assets/imgs/暂无.png">
                      <span style="color: #666666;text-align: center">暂无数据</span>
                    </div>

                    <!--                问题反馈区域-->
                    <div style="display: flex; justify-content: center; width: 100%; margin-top: 20px;">
                      <div style="display: flex; align-items: center;margin-bottom: 20px">
                        <el-link icon="el-icon-question"
                                 style="font-size: 16px; margin-right: 3px; color: #cccccc;"></el-link>
                        <div style="text-align: right; margin-left: auto;">
                          有问题？<a href="/front/feedBack" style="color: blue;"
                                    class="installation-step">点击反馈</a>
                        </div>
                      </div>
                    </div>
                  </div>

                </div>
              </div>


              <div class="Installation">
                <div class="installation-steps">安装步骤</div>

                <div v-if="appDetails.addition">
                  <div v-if="appDetails.description && appDetails.description !== '<p><br></p>'">

                    <div class="root-style" v-html="appDetails.description"></div>

                    <!--                    <ul class="scrollor">-->
                    <!--                      <li class="root-style" v-html="appDetails.description"></li>-->
                    <!--                    </ul>-->

                    <!-- 展开/收起按钮 -->
                    <!--                    <div>-->
                    <!--                      <div v-if="!isExpanded" class="read-more-container">-->
                    <!--                        <el-button size="medium" type="text" @click="toggleExpand">点击查看全部内容</el-button>-->
                    <!--                      </div>-->
                    <!--                      <div v-else class="read-less-container">-->
                    <!--                        <el-button size="medium" type="text" @click="toggleExpand">收起内容</el-button>-->
                    <!--                      </div>-->
                    <!--                    </div>-->
                  </div>
                  <div v-else>
                    <el-button :href="appDetails.addition"
                               style="margin-top: 16px;margin-bottom: 10px; margin-right: auto; display: block;border:none;font-size: 11px"
                               type="success" plain icon="el-icon-paperclip"
                               @click="toggleContent()">点击查看安装步骤
                    </el-button>
                  </div>
                </div>
                <div v-else style="font-size: 20px;font-weight: bold;margin: 20px 28px;color: blue">暂无</div>

              </div>

            </el-col>
          </el-row>

        </div>
      </div>
    </div>

    <!-- 遮罩层 -->
    <div v-if="fromVisiable" class="overlay"></div>
    <!--              对话框区域-->
    <div class="tip" v-if="fromVisiable">
      <div v-for="(item, i) in downloadList" :key="i"
           style="display:flex;flex-direction: row;cursor: pointer">
        <img v-if="item.channels.slugName === '百度网盘'"
             :src="item.img ? IMAGE_URL + item.img : require('@/assets/imgs/baidu.png')"
             style="width: 65px;height: 60px;margin: 8px">
        <img v-else-if="item.channels.slugName === '内网'"
             :src="item.img ? IMAGE_URL + item.img : require('@/assets/imgs/neiwang.png')"
             style="width: 65px;height: 60px;margin: 8px">
        <img v-else :src="item.img ? IMAGE_URL + item.img : require('@/assets/imgs/kuake.png')"
             style="width: 65px;height: 60px;margin: 8px">

        <div style="display: flex;flex-direction: column;margin-top: 8px"
             @click="handleClick(item.uri,item.addition,item.channels.slugName)">
          <div style="display: flex;flex-direction: row">
            <p v-if="item.channels.slugName === '内网'" style="text-align: left">直接下载</p>
            <p v-else style="text-align: left">{{ item.channels.slugName }}</p>
          </div>
          <p style="text-align: left;font-weight: bold;margin: 12px 0">{{ item.name }}</p>
          <div v-if="item.channels.slugName !== '内网'">
            下载链接：
            <el-link>{{ item.uri }}</el-link>
          </div>
        </div>
      </div>
      <el-button type="text" class="close-btn" @click="fromVisiable = false" icon="el-icon-close"></el-button>
      <el-button type="text" @click="fromVisiable = false" style="margin: 10px;color: black;font-size: 15px">
        确定
      </el-button>
    </div>

    <!-- 遮罩层 -->
    <div v-if="showQRCodeModal" class="overlays"></div>
    <!-- 模态框容器 -->
    <div class="qrcode-login" v-if="showQRCodeModal">
      <div style="display: flex;flex-direction: row">
        <!--        <img src="@/assets/imgs/front-logo.png" style="height: 30px;width: 30px;border-radius: 30px;margin: 6px 5px"/>-->
        <h2 style="font-weight: bold;font-size: 18px;margin-top: 10px">助教下载站</h2>
      </div>

      <div class="qrcode-modal">
        <!-- 关闭按钮 -->
        <el-button type="text" class="close-botton" @click="closeQRCodeModal" icon="el-icon-close"></el-button>
        <!-- 显示二维码图片 -->
        <img class="qrcode-img" :src="data.QRImageUrl" alt="二维码"/>
      </div>
      <p style="margin: 10px 0;text-align: center">微信扫码，授权登录</p>


      <span style="text-align: center;margin-top: 50px">登录即表示已阅读并同意《
        <el-button @click="toContact()" type="text">用户协议</el-button>》和《<el-button @click="toPrivate()" type="text">隐私政策</el-button>》</span>
    </div>

  </div>
</template>

<script>

import config from "../../../config";


export default {
  name: 'HomeDetail',
  data() {
    return {
      IMAGE_URL: config.IMAGE_URL,
      form: {
        id: this.$route.query.id,
        newCategoryName: this.$route.query.newCategoryName,
        categoryName: this.$route.query.categoryName,
      },
      buttonItems: [],
      pageNum: 1,   // 当前的页码
      pageSize: 0,  // 每页显示的个数
      total: 0,
      categoryName: '',
      apps: [],
      // 用于跟踪当前激活的按钮索引
      activeIndex: null,
      downloadLists: [],
      downloadList: [],
      appDetails: [],
      scale: 1,  // 初始缩放比例为 1，即原始大小
      isExpanded: false,  // 是否展开内容
      maxHeight: '450px',  // 内容在折叠状态下的最大高度
      showInstall: false,
      wh: 0,
      fromVisiable: false,
      id: '',
      userInfo: JSON.parse(localStorage.getItem('userInfo')),
      token: localStorage.getItem('token'),
      showQRCodeModal: false, // 控制模态框的显示
      refreshInterval: null, // 刷新二维码的定时器
      checkStatusInterval: null, // 检查扫码状态的定时器
      data: '',
      netWork: sessionStorage.getItem('netWork'),
      isLoading: true,
      number: true,
    }
  },
  mounted() {
    // 监听滚轮事件
    window.addEventListener('wheel', this.handleWheelEvent);
  },
  beforeDestroy() {
    // 移除事件监听
    window.removeEventListener('wheel', this.handleWheelEvent);

    this.closeQRCodeModal(); // 确保在组件销毁前关闭模态框并清除定时器
  },
  // created() {
  //   //查询边按钮数据
  //   this.load()
  //   //查询右边下载数据
  //   this.loadDownload()
  //   this.loadappDetails()
  //   this.getcategoryName()
  //   this.judge()
  // },
  created() {
    this.getcategoryName()
    // 使用 Promise.all 等待多个异步操作完成
    Promise.all([
      this.load(),
      this.loadDownload(),
      this.loadappDetails(),
    ]).then(() => {
      this.judge()
      this.isLoading = false;
    }).catch((error) => {
      console.error('Error loading data:', error);
      this.isLoading = false;
    });
  },
  computed: {
    getChannels() {
      console.log(this.netWork)
      let data = {}
      this.downloadLists.forEach(p => {
        data[p.channels.name] = this.downloadLists.filter(item => item.channelId === p.channelId)
      })
      if (this.netWork === "false") {
        delete data["内网可访问"];
      }
      return data;
    }
  },
  beforeRouteEnter(to, from, next) {
    // 判断是否从特定页面跳转过来
    if (from.name === 'Search') {
      next(vm => {
        // 在组件实例创建后刷新页面
        window.location.reload();
      });
    } else {
      next();
    }
  },
  beforeRouteLeave(to, from, next) {
    this.clear();
    next();
  },
  methods: {
    clear() {
      const key = localStorage.getItem('key');
      if (key) {
        localStorage.removeItem('key')
      }
    },
    judge() {
      const key = localStorage.getItem('key');
      // 检查 getChannels 是否已经有值
      if (!this.getChannels || Object.keys(this.getChannels).length === 0) {
        // console.log('getChannels 还没有准备好');
        // 延迟再试
        setTimeout(this.judge, 100);  // 100毫秒后重试
        return;
      }
      if (key) {
        this.openDialog(key);
      }
    },
    openDialog(i) {
      if (this.token) {
        this.fromVisiable = true
        this.downloadList = this.getChannels[i]
        localStorage.removeItem('key')
      } else {
        localStorage.setItem('key', i);
        this.$message.info('请先登录');
        this.showQRCode()
      }
    },
    showQRCode() {
      this.showQRCodeModal = true; // 显示模态框
      this.fetchQRCode(); // 请求二维码数据

      // 设置每60秒刷新二维码的定时器
      this.refreshInterval = setInterval(() => {
        this.fetchQRCode(); // 重新获取二维码
      }, 60000); // 60秒

      // 设置每2秒检查扫码状态的定时器
      this.checkStatusInterval = setInterval(() => {
        if (this.data.ticket) {
          this.checkScanStatus(this.data.ticket);
        }
      }, 2000);
    },
    closeQRCodeModal() {
      this.showQRCodeModal = false; // 关闭模态框
      // 清除所有定时器
      if (this.refreshInterval) {
        clearInterval(this.refreshInterval);
        this.refreshInterval = null;
      }
      if (this.checkStatusInterval) {
        clearInterval(this.checkStatusInterval);
        this.checkStatusInterval = null;
      }
    },
    fetchQRCode() {
      this.$request.get('/wx/getQR').then(res => {
        this.data = res.data
        // this.erweima = res.data.QRImageUrl // 更新组件的 erweima 数据
        // this.ticket = res.data.ticket
      })
    },
    checkScanStatus() {
      this.$request.get(`/wx/login/status?ticket=${this.data.ticket}`).then(res => {
        if (res.msg === 'failed') {
          // 扫码失败或未关注
          // this.$message.error('扫码失败或未关注公众号，请重新尝试！');
        } else {
          // 关闭模态框
          this.closeQRCodeModal()
          // 显示登录成功提示
          this.$message.success('登录成功！')
          // this.token = response.data.msg
          // const token = response.data.msg; // 或者可能是 response.data.msg，但通常 msg 是状态信息，不是 token
          // 将 token 存储到 localStorage
          localStorage.setItem("token", (res.msg))
          this.loadUserInfo()
        }
      })
    },
    loadUserInfo() {
      const token = this.getToken();
      this.$request.get('/apis/user/info', {
        headers: {
          'Authorization': `Bearer ${token}`
        }
      }).then(res => {
        localStorage.setItem("userInfo", JSON.stringify(res))  // 存储用户数据
        window.location.reload()
      })
      // } else if (res.status === 401) { // 检查是否因为token过期而返回401状态码
      //   this.$message.error('Token expired, please log in again.');
      //   this.showQRCode(); // 显示二维码或其他登录方式
    },
    getToken() {
      return localStorage.getItem('token');
    },
    getcategoryName() {
      if (this.form.categoryName) {
        this.categoryName = this.form.categoryName
      } else if (this.form.newCategoryName) {
        this.categoryName = this.form.newCategoryName
      } else {
        return;
      }
    },
    handleWheelEvent(event) {
      // 检查是否按下了Ctrl键
      if (event.ctrlKey) {
        // 防止页面的默认缩放行为
        //event.preventDefault();

        // 判断滚轮方向
        if (event.deltaY < 0) {
          // 滚轮向上滚动，放大页面
          this.scale = Math.min(this.scale + 0.1, 2);  // 最大放大到2倍
        } else {
          // 滚轮向下滚动，缩小页面
          this.scale = Math.max(this.scale - 0.1, 0.5);  // 最小缩小到0.5倍
        }
      }
    },
    loadappDetails() {
      return this.$request.get(`/apis/downResources/detail/${this.form.id}`, {
        params: {
          typeId: 2
        }
      }).then(res => {
        this.appDetails = res.data
      }).catch(error => {
        console.error('Error loading download resources:', error);
        throw error;
      });
    },
    // 设置当前激活的按钮索引
    setActive(index, id) {
      this.id = id
      this.activeIndex = index === null ? null : index;
      this.categoryName = index === null ? '' : this.buttonItems[index].name; // 更新当前分类名称

      if (this.activeIndex === null) {
        this.$router.push({
          name: 'Face',
          query: {
            activeIndex: null,
          }
        })
      } else {
        this.$router.push({
          name: 'FaceClick',
          query: {
            categoryName: this.categoryName,
            activeIndex: this.activeIndex,
            pId: id,
          }
        })
      }
    },
    //查询右边下载数据
    loadDownload() {
      this.number = true
      return this.$request.get(`/apis/downResources/${this.form.id}`, {
        params: {
          typeId: 2
        }
      }).then(res => {
        this.downloadLists = res.data;
        if(this.downloadLists.length === 0){
          this.number = false
        }
        return res.data;
      }).catch(error => {
        console.error('Error loading download resources:', error);
        throw error;
      });
    },
    //查询左边按钮数据
    load() {
      return this.$request.get('/apis/downCategories/list', {
        params: {
          type: 1,
          typeId: 2
        }
      }).then(res => {
        let sortedData = res.data.sort((a, b) => a.showOrder > b.showOrder ? 1 : -1);
        let activeIndex = -1;
        sortedData.forEach((item, index) => {
          if (item.name.toLowerCase() === this.categoryName.toLowerCase()) { // 忽略大小写比较
            activeIndex = index;
          }
        });
        this.buttonItems = sortedData;
        this.activeIndex = activeIndex;
        return sortedData;
      }).catch(error => {
        console.error('Error loading categories:', error);
        throw error;
      });
    },
    handleCurrentChange(pageNum) {
      this.load(pageNum)
    },
    toggleContent() {
      window.open(this.appDetails.addition, '_blank'); // 打开链接在新标签页中
    },
    handleClick(uri, addition, slugName) {
      if (slugName === '内网') {
        // window.location.href = uri; // 导航到URI
        uri = 'http://tianyou.xyhelp.cn/resource' + uri;
        window.open(uri, '_blank'); //来在新标签页中打开
      } else {
        // window.location.href = uri; // 导航到URI
        uri += '?pwd=' + encodeURIComponent(addition);
        window.open(uri, '_blank'); //来在新标签页中打开
      }
    },
    toContact() {
      this.$router.push({
        name: 'Contact',
        query: {
          activeIndex: 1
        }
      })
      this.showQRCodeModal = false
    },
    toPrivate() {
      this.$router.push({
        name: 'Contact',
        query: {
          activeIndex: 3
        }
      })
      this.showQRCodeModal = false
    },
  }
}
</script>

<style scoped>
.left-scroll-view-item {
  color: black; /* 默认颜色 */
  margin: 1px 0;
  text-align: center;
  font-size: 14px;
  border: none;
}


.left-scroll-view-item.is-active {
  background-color: #d4dff4;
  color: blue; /* 激活时的颜色 */
  font-size: 15px;
  border: none;
}

.active-indicator {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px; /* Width of the indicator */
  background-color: blue; /* Color of the indicator */
}

.container {
  margin-top: 20px;
  position: relative;
}

.breadcrumb-and-rank {
  display: flex;
  align-items: center;
  margin: 15px 8px
}

/* 改进安装步骤标题的样式 */
.installation-steps {
  display: inline-block;
  position: relative;
  font-weight: bold;
  font-size: 16px;
  color: #333; /* 更深的字体颜色 */
  padding: 8px 16px; /* 增加内边距 */
//background-color: #f0f0f0; /* 浅灰色背景 */ //border-radius: 4px; /* 圆角边框 */ //box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 轻微的阴影效果 */
}

/* 改进伪元素样式，用于创建装饰线 */
.installation-steps::after {
  content: '';
  display: block;
  height: 2px; /* 更细的直线 */
  background-color: blue; /* 更鲜亮的绿色 */
  width: 46%; /* 直线宽度占满父元素 */
  position: absolute;
  bottom: 0px; /* 调整距离 */
  left: 27px; /* 从左侧开始 */
  border-radius: 2px; /* 直线两端也添加圆角 */
}

.Installation {
  padding: 15px; /* 增加内边距 */
  margin-top: 20px; /* 增加上边距 */
  background-color: #fff; /* 白色背景 */
}

.item-img {
  width: 100px;
  height: 100px;
  margin-right: 20px;
  margin-top: 10px;
  border-radius: 12px
}

.item {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  width: 1500px
}

.item-name {
  margin: 7px 0;
  font-weight: bold;
  font-size: 21px
}

.slugName {
  font-size: 15px;
  margin: 7px 0;
}

.item-desc {
  margin: 36px 0 0 0;
  font-size: 15px;
  line-height: 1.6
}

.item-intro {
  font-size: 15px;
  line-height: 1.8
}

.item-left {
  width: auto;
  display: flex;
  align-items: center;
}

.item-right {
  padding: 0 10px;
}

.card {
  display: flex;
  flex-direction: row;
  margin: 10px;
  padding: 20px;
  width: 70%
}

.download-right {
  margin-left: 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.main-content {
  width: 1200px; /* 设置最大宽度 */
  margin: 0 auto; /* 居中显示 */
}

.content-container {
  max-height: 300px; /* 折叠状态下的最大高度 */
  overflow: hidden;
  transition: max-height 0.3s ease; /* 动画过渡效果 */
  margin: 8px;
}

.read-more-container, .read-less-container {
  text-align: center; /* 按钮居中显示 */
  margin-top: 10px;
}

.item-left-col {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background: white;
  margin-top: 8px;
  position: sticky;
  top: 2.2rem;
  z-index: 100;
}

.root-style {
  margin-top: 6px;
}

/deep/ .root-style img {
  margin: 5px;
}

.container-right {
  background: white;
}

/* 遮罩层样式 */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 灰色背景，透明度 50% */
  z-index: 1000;
}

.overlays {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 灰色背景，透明度 50% */
  z-index: 1000;
}

.tip {
  position: fixed;
  z-index: 1001;
  width: 40vw;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  text-align: right;
  border-radius: 3px;
  overflow: hidden;
  padding: 13px;
}

.close-btn {
  position: absolute; /* 绝对定位 */
  top: 3px; /* 距离顶部10px */
  right: 10px; /* 距离右边10px */
  z-index: 1001; /* 确保关闭按钮在模态框内容的上方 */
  border: none;
  font-size: 20px;
  color: black;
}

.qrcode-login {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: flex;
  flex-direction: column;
}

.qrcode-modal {
  margin: 60px 10px 0 0;
  text-align: center;
  align-items: center;
}

.qrcode-img {
  border: 1px solid #e0e0e0;
  text-align: center;
  width: 200px;
  height: 200px;
  padding: 5px;
}

.close-botton {
  position: absolute; /* 绝对定位 */
  top: 10px; /* 距离顶部10px */
  right: 16px; /* 距离右边10px */
  z-index: 1001; /* 确保关闭按钮在模态框内容的上方 */
  border: none;
  font-size: 25px;
  color: black;
}

.scrollor {
  height: 600px;
  overflow: auto;
}
</style>